<template>
    <div class="searchPage">
        <div class="searchTop">
            <div class="icon" @click="goback">
                <img class="auto-img" src="../../public/images/songList/向左.png" alt="">
            </div>
            <div class="inp">
                <form action="/">
                    <van-search v-model="value" shape="round" background="#1B1344" placeholder="请输入搜索关键词"
                        @search="onSearch" @input="goinput" />
                </form>
            </div>
        </div>
        <div v-if="value">
            <div class="hasValue">
                <div v-if="isClick == false">
                    <div class="item" v-for="(item, index) in searchKeyWord" :key="index" @click="goSearchSong(item)">
                        <div class="img">
                            <van-icon name="search" size="20" />
                        </div>
                        <div class="text">{{ item.name }}</div>
                    </div>
                </div>
                <div v-else>
                    <div class="isclick">
                        <div class="type">
                            <van-tabs v-model="active" title-active-color="#58FFF5" @change="onchange">
                                <van-tab title="综合">
                                    <div>
                                        <div class="singer" is-play-icon="true">
                                            <van-card :thumb="danquData[0].al.picUrl" v-if="danquData">
                                                <template #desc>
                                                    <div>歌手</div>
                                                    <div>{{ danquData[0].ar[0].name }}</div>
                                                    <div>歌曲：{{ danquData[0].al.name }}</div>
                                                </template>
                                            </van-card>
                                        </div>
                                        <div class="danqu">
                                            <div class="title">
                                                <div class="left">
                                                    <div class="one">单曲</div>
                                                    <div class="two">
                                                        <van-icon name="play" size="15" color="#58FFF5" />
                                                        <span>播放</span>
                                                    </div>
                                                </div>
                                                <div class="right">全部版本</div>
                                            </div>
                                            <div class="songListAll">
                                                <div class="songListItem" v-for="(item, index) in danquData"
                                                    :key="index">

                                                    <listItem :song-data="item" :index="index" :isPlayIcon="true">
                                                    </listItem>
                                                    <!-- <div>{{ item.name }}</div> -->
                                                </div>


                                            </div>
                                        </div>
                                    </div>
                                </van-tab>
                                <van-tab title="专辑">
                                    <div>
                                        <div class="thr">
                                            <van-tabs v-model="activeName" color="transparent">
                                                <van-tab title="默认" name="a">
                                                    <div v-for="(item, index) in zhuanjiData" :key="index" class="list">
                                                        <songList2 :song-list-data="item"
                                                            @getSonDetail="getSonDetail(item.id, item.picUrl)">
                                                        </songList2>
                                                    </div>
                                                </van-tab>
                                                <van-tab title="最新" name="b">内容 2</van-tab>
                                                <van-tab title="最热" name="c">内容 3</van-tab>
                                            </van-tabs>
                                        </div>
                                    </div>
                                </van-tab>
                                <van-tab title="歌单"></van-tab>
                                <van-tab title="视频"></van-tab>
                                <van-tab title="专辑"></van-tab>
                                <van-tab title="歌手"></van-tab>
                                <van-tab title="节目"></van-tab>
                                <van-tab title="扑通"></van-tab>
                                <van-tab title="歌词"></van-tab>
                                <van-tab title="用户"></van-tab>
                            </van-tabs>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="value.length === 0" class="searchType">
            <van-grid :border="false" :column-num="4">
                <van-grid-item v-for="(item, index) in srearchPic" :key="index">
                    <div class="img">
                        <img class="auto-img" :src="item.pic" alt="">
                    </div>
                    <div class="text">{{ item.title }}</div>
                </van-grid-item>
            </van-grid>
        </div>
        <div v-if="value.length === 0" class="history">
            <div>搜索历史</div>
            <div class="historyContent">
                <div class="singSongName">蔡依林</div>
                <div class="singSongName">蔡依林</div>
            </div>
        </div>
        <div v-if="value.length === 0" class="searchTypes">
            <van-swipe :width="250" :loop="false">
                <van-swipe-item>
                    <div class="hot">
                        <div class="title">
                            <div class="content">热门搜索</div>
                            <div class="paly">
                                <div class="img">
                                    <img src="" alt="">
                                </div>
                                <div class="bofang">播放</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="name-num" v-for="(item, index) in searchData" :key="index"
                                @click="getPaly(item)">
                                <div class="num">{{ index + 1 }}</div>
                                <div class="name">{{ item.searchWord }}</div>
                            </div>
                        </div>

                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="hot">
                        <div class="title">
                            <div class="content">话题榜</div>
                            <div class="paly">
                                <div class="img">
                                    <img src="" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="name-num" v-for="(item, index) in hotData2" :key="index">
                                <div class="num">{{ index + 1 }}</div>
                                <div class="name">{{ item.title }}</div>
                            </div>
                        </div>

                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="hot">
                        <div class="title">
                            <div class="content">热门搜索</div>
                            <div class="paly">
                                <div class="img">
                                    <img src="" alt="">
                                </div>
                                <div class="bofang">播放</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="name-num">
                                <div class="num">111111</div>
                                <div class="name">222222</div>
                            </div>
                            <div class="name-num">
                                <div class="num">111111</div>
                                <div class="name">222222</div>
                            </div>
                        </div>

                    </div>
                </van-swipe-item>
                <van-swipe-item>
                    <div class="hot">
                        <div class="title">
                            <div class="content">热门搜索</div>
                            <div class="paly">
                                <div class="img">
                                    <img src="" alt="">
                                </div>
                                <div class="bofang">播放</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="name-num">
                                <div class="num">111111</div>
                                <div class="name">222222</div>
                            </div>
                            <div class="name-num">
                                <div class="num">111111</div>
                                <div class="name">222222</div>
                            </div>
                        </div>

                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import srearchPic from "../../public/json/search.json"
import searchBack from "../components/searchBack.vue"
import listItem from '@/components/songListItem.vue'
import songList2 from '@/components/songListItem2.vue'
export default {
    name: "SearchPage",
    data() {
        return {
            value: '',
            srearchPic,
            searchData: "",
            searchKeyWord: "",
            isClick: false,
            active: 0,
            danquData: "",
            hotData2: "",
            activeName: 'a',
            zhuanjiData: ""
        };
    },
    components: {
        searchBack,
        listItem,
        songList2
    },
    created() {

        //   
        // 热门搜索数据
        this.gethotData1()

        // 热门话题
        this.gethotData2()

        // 专辑
        this.getzhuanjiData()

    },
    methods: {
        ...mapMutations(['setIsMain']),
        getPaly(item) {
             
            this.value = item.searchWord
            this.isClick = !this.isClick
            if (this.isClick) {
                this.axios({
                    method: "get",
                    url: "/cloudsearch",
                    params: {
                        keywords: item.searchWord,
                        limit: 30
                    }
                }).then(res => {

                    this.danquData = res.data.result.songs

                }).catch(err => {

                })
            }
        },

        // 热门搜索数据
        gethotData1() {
            this.axios({
                method: "get",
                url: "/search/hot/detail",
            }).then(res => {

                this.searchData = res.data.data

            }).catch(err => {

            })
        },
        // 热门话题
        gethotData2() {
            this.axios({
                method: "get",
                url: "/hot/topic",
                params: {
                    limit: 20
                }
            }).then(res => {

                this.hotData2 = res.data.hot

            }).catch(err => {

            })
        },
        // 输入框
        goinput(value) {
            //  
            this.axios({
                method: "get",
                url: "/cloudsearch",
                params: {
                    keywords: value,
                    limit: 30
                }
            }).then(res => {
                this.searchKeyWord = res.data.result.songs
            }).catch(err => {

            })
        },
        // 搜索歌曲数据
        goSearchSong(item) {
             
            this.isClick = !this.isClick
            if (this.isClick) {
                this.axios({
                    method: "get",
                    url: "/cloudsearch",
                    params: {
                        keywords: item.name,
                        limit: 30
                    }
                }).then(res => {

                    this.danquData = res.data.result.songs

                }).catch(err => {

                })
            }
        },
        // enter搜索
        onSearch(value) {
             

            this.isClick = !this.isClick
            if (this.isClick) {
                this.axios({
                    method: "get",
                    url: "/cloudsearch",
                    params: {
                        keywords: value,
                        limit: 30,
                        type: 1
                    }
                }).then(res => {
                    this.danquData = res.data.result.songs

                }).catch(err => {

                })
            }
        },
        onchange(title) {
             
            if (title === 1) {
                this.axios({
                    method: "get",
                    url: "/cloudsearch",
                    params: {
                        keywords: this.value,
                        limit: 30,
                        type: 10
                    }
                }).then(res => {
                     
                    this.zhuanjiData = res.data.result.albums
                     

                    // this.danquData = res.data.result.songs

                }).catch(err => {

                })
            }

        },
        getSonDetail(id, url) {
             

            this.setIsMain(false)
            this.$router.push({ name: "RecommendLIstDetail", params: { id, url } })
        },
        // 获取专辑数据
        getzhuanjiData() {
            //  
            //  
            // this.axios({
            //     method: "get",
            //     url: "/cloudsearch",
            //     params: {
            //         keywords: this.value,
            //         limit: 30,
            //         type: 10
            //     }
            // }).then(res => {
            //      
            //     // this.zhuanjiData = 

            //     this.danquData = res.data.result.songs
            //     //  

            // }).catch(err => {

            // })
        },
        // 返回
        goback() {
             
            this.$router.back()
        }
    },
}
</script>

<style lang="less" scoped>
* {
    margin: 0px;
}

.searchPage {
    // position: fixed;
    padding-bottom: 40px;
    // bottom: 0px;
    // top: 0px;
    // left: 0px;
    // right: 0px;
    background-color: #160742;
    // background-color: transparent;
    color: #fff;

    .songListAll {
        padding-bottom: 50px;
    }

    .songListItem {
        overflow: scroll;
    }

    .searchTop {
        height: 50px;
        align-items: center;
        display: flex;
        justify-content: space-around;

        .inp {
            width: 80%;

            /deep/.van-search {
                padding: 0px 0px;
                height: 30px;
            }

            .van-cell {
                height: 30px;
                color: #fff;
            }

            .van-search__content {
                background-color: #271A4F;
            }

            /deep/.van-field__control {
                color: #fff;
            }

        }

        .thr {
            width: 150px;

            .list {
                width: 94%;
                margin: 0px 3%;
            }

            .van-tabs__line {
                display: none;
            }
        }

        .icon {
            width: 25px;
        }
    }

    .hasValue {
        background-color: #160742;

        .item {
            display: flex;
            align-items: center;
            margin: 15px 15px 15px 20px;

            .text {
                margin-left: 10px;
            }
        }
    }

    .isclick {
        /deep/.van-tabs__nav {
            background-color: #160742;
            color: #fff;
        }

        /deep/.van-tab {
            background-color: #160742;
            color: #fff;

        }

        /deep/.van-tabs__line {
            background-color: #58FFF5;
        }

        /deep/.van-card {
            background-color: #160742;
            color: #fff;
        }

        .van-image {
            background-color: #160742;
        }

        .van-card__content {
            margin-left: 10px;

            div {
                margin-top: 8px;
            }
        }

        .type {
            /deep/.van-card__thumb img {
                border-radius: 80%;
                background-color: #160742;
            }
        }

        .danqu {
            width: 90%;
            margin: 0px 5%;
            height: 100%;

            .title {
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left {
                    display: flex;
                    align-items: center;

                    .one {
                        font-size: 16px;
                    }

                    .two {
                        margin-left: 10px;
                        background-color: #281B53;
                        padding: 1px 2px;

                        span {
                            margin-left: 5px;
                        }
                    }
                }

                .right {
                    font-size: 12px;
                }
            }
        }
    }

    .searchType {
        margin: 10px 10%;
        width: 80%;

        .text {
            margin-top: 10px;
        }

        .img {
            width: 25px;
        }

        /deep/.van-grid-item__content {
            background-color: #160742;
            color: #fff;
        }
    }

    .history {
        width: 90%;
        margin: 10px 5%;

        .historyContent {
            display: flex;

            .singSongName {
                margin: 10px 15px 10px 0px;
                padding: 0px 2px;
                background-color: #281B53;
                border-radius: 20px;
            }
        }
    }

    .searchTypes {

        /deep/.van-swipe__indicators {
            display: none;
        }

        .hot {
            border-radius: 5px;
            background-color: #281B53;
            margin: 0px 5px;

            .title {

                padding: 10px 10px;
                width: 90%;
                display: flex;

                .paly {
                    margin-left: 10px;
                    display: flex;
                }
            }

            .name-num {
                width: 90%;
                margin: 10px 10px;
                display: flex;

                .name {
                    margin-left: 15px;
                }
            }
        }

    }

}
</style>